<style scoped lang="stylus">
  @import "detail.styl";
</style>

<template>
  <div id="GoodsDetail">
    <my-header title="商品详情" :showLeft="true"></my-header>
    <div class="banner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in detailData.bannerList" :key="index">
          <img v-lazy="image"/>
        </van-swipe-item>
      </van-swipe>
    </div>




    <div class="test" @click="testClick">click me</div>

    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>
    <p>hello</p>

    <van-popup v-model="showDialog" position="bottom" :overlay="true">
      <detail-dialog></detail-dialog>
    </van-popup>
  </div>

</template>

<script>

  import Header from '../../components/header/index.vue';
  import DetailDialog from '../../components/goods/detailDialog'
  import {Swipe, SwipeItem,Popup } from 'vant';

  export default {
    name: 'GoodsDetail',

    // 接受上一个界面传递过来的参数
    props: [],

    // 组件
    components: {
      MyHeader: Header,
      VanSwipe: Swipe,
      VanPopup: Popup,
      VanSwipeItem: SwipeItem,
      DetailDialog: DetailDialog,
    },

    // 数据初始化
    data() {
      return {
        detailData: {
          bannerList: [
            'http://image.charmzenus.com/Uploads/other/2018-07-12/5b47119877fc3.jpg',
            'http://image.charmzenus.com/Uploads/other/2018-07-12/5b4711a027bb7.jpg',
            'http://image.charmzenus.com/Uploads/other/2018-07-12/5b4711a7d0c0e.jpg'
          ]
        },
        showDialog: false
      };
    },

    // 页面创建完毕
    mounted() {

    },

    // 方法
    methods: {
      testClick: function () {

        this.showDialog = true;
      }
    },

    // 监听数据的变化
    watch: {
      //testValue: function (val) {
      //}
    }
  };
</script>


